<template>
  <el-container>
    <el-aside :width="isCollapse ? '66px' : '250px' ">
      <div class="isCollapseStyle" @click="clickCollapse()">
        <i :class=" isCollapse ? 'el-icon-d-arrow-right' : 'el-icon-d-arrow-left' "></i>
      </div>
      <!-- 滚动条 -->
      <!-- 侧边栏导航条 -->
      <el-menu :default-active="activePath" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" unique-opened router>
        <!-- 一级菜单 -->
        <el-submenu index="1">
          <template slot="title" class="firstmenu">
            <i class="el-icon-setting"></i>
            <span>基础乐理</span>
          </template>
          <!-- 二级菜单 -->
          <el-menu-item index="/Score" @click="saveNavState('/Score')">
            <i class="el-icon-menu"></i>
            <span>识谱</span>
          </el-menu-item>
          <el-menu-item index="/Interval" @click="saveNavState('/Interval')">
            <i class="el-icon-setting"></i>
            <span>音程</span>
          </el-menu-item>
          <el-menu-item index="/Chord" @click="saveNavState('/Chord')">
            <i class="el-icon-document"></i>
            <span>和弦</span>
          </el-menu-item>
          <el-menu-item index="/Tempo" @click="saveNavState('/Tempo')">
            <i class="el-icon-document"></i>
            <span>节奏</span>
          </el-menu-item>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title" class="firstmenu">
            <i class="el-icon-document"></i>
            <span>进阶乐理</span>
          </template>
          <!-- 二级菜单 -->
          <el-menu-item index="/Scale" @click="saveNavState('/Scale')">
            <i class="el-icon-menu"></i>
            <span>音阶</span>
          </el-menu-item>
          <el-menu-item index="/a" @click="saveNavState('/a')">
            <i class="el-icon-document"></i>
            <span>旋律</span>
          </el-menu-item>
          <el-menu-item index="/welcome" @click="saveNavState('/welcome')">
            <i class="el-icon-document"></i>
            <span>和声</span>
          </el-menu-item>
          <el-menu-item index="/c" @click="saveNavState('/c')">
            <i class="el-icon-document"></i>
            <span>曲式</span>
          </el-menu-item>
        </el-submenu>
      </el-menu>
    </el-aside>
    <el-main id="files_el_main">
      <router-view></router-view>
      <el-tooltip effect="dark" content="回到顶部" placement="top">
        <div @click="backTop()" class="el-backtop" style="right: 80px; bottom: 120px;">
          <i class="el-icon-caret-top"></i>
        </div>
      </el-tooltip>
      <el-tooltip effect="dark" content="底部" placement="top">
        <div @click="backBottom()" class="el-backtop" style="right: 80px; bottom: 70px;">
          <i class="el-icon-caret-bottom"></i>
        </div>
      </el-tooltip>
    </el-main>
  </el-container>
</template>
<script>
export default {
  name: 'Home',
  data() {
    return {
      isCollapse: false,
      // 左侧菜单的激活路径
      activePath: '/Scale'
    }
  },
  created() {
    this.activePath = window.localStorage.getItem('activePath')
    if (this.activePath === null) {
      this.activePath = '/Scale'
    }
  },
  methods: {
    backTop() {
      document.getElementById('files_el_main').scrollTop = 0
    },
    backBottom() {
      document.getElementById('files_el_main').scrollTop = document.getElementById('files_el_main').scrollHeight
    },
    clickCollapse() {
      this.isCollapse = !this.isCollapse
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath)
    },
    saveNavState(activePath) {
      window.localStorage.setItem('activePath', activePath)
    }
  }
}

</script>
<style scoped>
.el-submenu__title {
  font-size: 14px;
  color: #303133;
  padding: 0 70px;
  cursor: pointer;
  -webkit-transition: border-color .3s, background-color .3s, color .3s;
  transition: border-color .3s, background-color .3s, color .3s;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding-left: 0 !important;
}

.firstmenu {
  padding-left: 0 !important;
}

.el-menu-vertical-demo span {
  vertical-align: inherit;
}

.isCollapseStyle {
  background-color: #4A5064;
  line-height: 28px;
  color: white;
  text-align: center;
  cursor: pointer;
}

.el-header {
  /*background-color: #B3C0D1;*/
  background-color: #545c64;
  color: #333;
  text-align: center;
  line-height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 22px;
  font-family: "微软雅黑";
  color: #fff;
  padding-left: 15px;
}

.el-menu.el-menu--horizontal {
  border-bottom: solid 0 #e6e6e6;
}

.el-aside {
  /*background-color: #D3DCE6;*/
  background-color: #545c64;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-aside .el-menu {
  border-right: none;
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
  line-height: 160px;
}

body>.el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

</style>
